<template>
  <div class="cate">
    <my-header>
      <template #right>
        <div class="search">
          <van-search v-model="value" placeholder="商品、品牌、IP名" shape="round" closable />
        </div>
      </template>
    </my-header>

    <div class="wrap">
      <!-- 侧边栏 -->
      <div class="side">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item
            :title="l.typeName"
            v-for="(l, i) in goodscates"
            :key="i"
          />
        </van-sidebar>
      </div>

      <!-- 右边内容 -->
      <div class="content" ref="content">
        <div class="item" v-for="(item, index) in goodscates" :key="index">
          <h2>{{ item.typeName }}</h2>
          <div class="gitem">
            <div
              class="exh2"
              v-for="(item1, index1) in item.categoryLogicVOList"
              :key="index1"
              @click="gotoShopSearch(item1.name)"
            >
              <img :src="item1.img" alt="" />
              <p>{{ item1.name }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodscates: [],
      //   sidebar
      activeKey: 0,
      //   搜索框
      value: "",
    };
  },
  methods: {
    // 跳转到首页，携带要搜索的值 (item.name)
    gotoShopSearch(searchValue){
      this.$router.push({name:'shop',params:{searchValue:searchValue}})
    },
    //   获取商品分类
    async getGoodCate() {
      let res = this.$ajax.getGoodCateData({ shopId: 2233 }).then((res) => {
        //   console.log(res.data.vo);
        this.goodscates = res.data.vo;
      });
    },
    // 切换侧边栏
    onChange(index){
        // console.log(index);
        // console.log(this.$refs.content.childNodes);
        // console.log(this.$refs.content.childNodes[index].offsetTop);
        window.scrollTo(0,this.$refs.content.childNodes[index].offsetTop-48)
    },
  },
  mounted() {
    this.getGoodCate();
  },
};
</script>

<style lang="scss" scoped>
.cate {
  width: 100%;
  height: 100%;
  //   padding-bottom: 50px;
  .wrap {
    overflow: hidden;
    .side {
      position: fixed;
      width: 22%;
      height: 100%;
      overflow: auto;
      padding-bottom: 50px;
    }
    .content {
      float: right;
      width: 78%;
      //   overflow: auto;
      padding-bottom: 50px;
      .item {
        width: 100%;
        display: flex;
        flex-direction: column;
        h2{
            // margin-left: 15px;
            margin: 10px 0 10px 15px;
            font-size: 14px;
            text-shadow: 0px 0px 5px salmon;
        }
        .gitem {
          width: 100%;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .exh2 {
            width: 33.3%;
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            img {
              width: 80%;
            }
            p {
              color: #999;
              font-size: 12px;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
</style>